<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        /** 这种布局,适合 子元素固定宽度的时候, 比较方便 */
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-right: -10px;
      }

      .list {
        /* 注意:!! 有时候 min-width 会造成换行时, 被剩余多余的元素会自动拉长,造成无法对其问题 */
        /* 所以这里一般用 width 固定值就好  */
        /* min-width: 300px; */
        width: 300px;
        height: 100px;
        background-color: skyblue;
        margin: 15px 10px 0 0;

        /** 剩余空间太大的时候, list 均分剩余空间 */
        flex-grow: 1;
      }
      .container > i {
        /* 和列表一样的宽度相同 和 列表的margin值相同 */
        width: 300px;
        margin-right: 10px;
        /** 剩余空间太大的时候, i 和 list 均分剩余空间 */
        flex-grow: 1;
      }
    </style>
  </head>
  <body>
    <h2 style="color: red; text-align: center">
      flex 布局最优解决方案. 该方案参照 04.如果每一行的列数不固定1-最常用,最方便
      方案实现
    </h2>
    <h2 style="color: green; text-align: center">
      通过创建空白 i 标签的方式实现
    </h2>
    <div id="container" class="container">
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
    </div>
    <h1 style="color: red; text-align: center">
      注意!注意!注意!: 动态创建的 i 标签数量和 div 的数量一定要相等,一定要相等.
      一定要相等. 重要的事情说三遍!!!
    </h1>
    <script>
      function createEmptyINodeByDivListLength(length) {
        const divContainer = document.getElementById("container");
        const arr = document.querySelectorAll(".list");
        console.log(123123123, arr);
        for (let i = 0; i < arr.length; i++) {
          const iNode = document.createElement("i");
          divContainer.appendChild(iNode);
        }
      }
      createEmptyINodeByDivListLength(6);
    </script>
  </body>
</html>
